<template>
    <div style="flex: 1;">
        <el-card style="width: 40%;margin: 10px;">
            <el-form ref="form" :model="form" label-width="auto" style="max-width: 600px"> 
                <el-form-item label="用户名">
                        <el-input v-model="form.username" />
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input v-model="form.password" />
                    </el-form-item>
                    <el-form-item label="昵称">
                        <el-input v-model="form.nickName" />
                    </el-form-item>
                    <el-form-item label="年龄">
                        <el-input v-model="form.age" />
                    </el-form-item>
                    <el-form-item label="性别">
                        <el-radio v-model="form.sex" value="男" size="large">男</el-radio>
                        <el-radio v-model="form.sex" value="女" size="large">女</el-radio>
                        <el-radio v-model="form.sex" value="未知" size="large">未知</el-radio>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input type="textarea" v-model="form.address" />
                    </el-form-item>
            </el-form>
            <div style="text-align:center">
            <el-button type="primary" @click="update">保存</el-button>
        </div>
        </el-card>
        
    </div>

</template>
<script lang="ts" setup name="Person">
import { onBeforeMount, reactive } from 'vue';
import request from '../utils/request';
import { ElMessage } from 'element-plus';


let form = reactive({
    username:'',
    password:'',
    nickName:'',
    age:'',
    sex:'',
    address:''
})

onBeforeMount(()=>{
    let str = sessionStorage.getItem("user")||"{}"
    form = JSON.parse(str)
})

function update(){
    request.put("/user",form).then(res=>{
        console.log(res);
        if(res.code === '0'){
                ElMessage({
                message: '修改成功',
                type: 'success' 
            })
            sessionStorage.setItem("username",form.username) //缓存用户信息
            }
            else {
                ElMessage({
                message: res.msg,
                type: 'error'
            })
            } 
    })
}

</script>